<template>
  <div class="json">
    <el-tabs v-model="activeName" style="padding: 0;">
      <el-tab-pane label=键值对 name="first">
        <div style="height: 200px;overflow-y: scroll;overflow-x: hidden">
          <el-row v-for="attr in data" :key="attr.id" class="row">
            <el-col :span="10" class="col">
              <el-input v-model="attr.a" size="mini" @input="changed"></el-input>
            </el-col>
            <el-col :span="1" class="col">-</el-col>
            <el-col :span="10" class="col">
              <el-input v-model="attr.b" size="mini" @input="changed"></el-input>
            </el-col>
            <el-col :span="3" class="col">
              <el-button size="mini" circle icon="el-icon-plus"
                         v-if="data.indexOf(attr) === data.length - 1"
                         @click="addNewKV(attr)" :disabled="attr.a ==='' || attr.b===''">

              </el-button>
              <el-button size="mini" circle icon="el-icon-minus" v-else-if="data.indexOf(attr) !== data.length - 1"
                         @click="removeKv(attr)"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="JSON" name="second">
        <el-input type="textarea" :rows="5" :value="value" @input="textChanged"></el-input>
        <span v-if="isVisible">{{warn}}</span>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        activeName: 'first',
        data: [],
        isVisible: undefined,
        warn: ''
      }
    },
    props: {
      value: {
        type: String
      }
    },
    model: {
      prop: 'value',
      event: 'caleJson'
    },
    methods: {
      /**
       * 添加一行新测
       */
      addNewKV(attr) {
        this.data.push({id: this.data.length, a: '', b: ''});
        this.$emit('caleJson', this.array2Json());
      },
      /**
       * 删除一行
       */
      removeKv(attr) {
        this.data.splice(this.data.indexOf(attr), 1);
        this.$emit('caleJson', this.array2Json());
      },
      /**
       * 数组转JSON
       */
      array2Json() {
        var obj = {};
        for (let i in this.data) {
          if (i === 'id' || i === '') {
            continue;
          }
          obj[this.data[i].a] = this.data[i].b;
        }
        return JSON.stringify(obj);
      },
      /**
       * 事件触发
       */
      changed() {
        this.$emit('caleJson', this.array2Json());
      },
      /**
       * 监测问题编辑
       * @param v
       */
      textChanged(v) {
        try {
          JSON.parse(v)
        } catch (e) {
          this.isVisible = true;
          this.warn = 'JSON格式不正确';
          this.$emit('caleJson', v);
          return;
        }
        this.warn = '验证通过';
        this.$emit('caleJson', v);
      },
      /**
       * 构建数组
       * @returns {Array}
       */
      kv() {
        this.data = [];
        if (this.value === '' || this.value === "") {
          this.data.push({id: this.data.length, a: '', b: ''});
          return this.data;
        }
        try {
          const obj = JSON.parse(this.value);
          for (const key in obj) {
            this.data.push({id: this.data.length, a: key, b: obj[key]});
          }
        } catch (e) {
          console.warn('属性字典JSON解析出错!');
        }
      }

    },
    mounted: function () {
      this.kv();
    },
    watch: {
      value(n, o) {
        this.kv();
      }
    }


  }
</script>

<style scoped>
  .json {
    position: inherit;
    height: 260px;
    width: 100%;
  }

  .json .row {
    position: relative;
    margin-top: 2px;
    width: 100%;
  }

  .json .row .col {
    text-align: center;
  }
</style>
